<template lang="">
    <div>
        <p :style="{opacity}">欢迎学习Vue</p>
        <ul>
            <li>
                <a href="">New001</a>
                <input type="text">
            </li>
            <li>
                <a href="">New002</a>
                <input type="text">
            </li>
            <li>
                <a href="">New003</a>
                <input type="text">
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    name:"xinwen",
    data(){
        return{
            opacity:1
        }
    },
    /*mounted() {
        this.timer = setInterval(()=>{
            console.log('@')
            this.opacity -= 0.01
            if(this.opacity <= 0) this.opacity = 1
        },16)
    },*/
    /*beforeDestroy() {
        console.log('News组件被销毁前')
        clearInterval(this.timer)
    },*/
    activated() {
        console.log('News组件被激活')
        this.timer = setInterval(()=>{
            console.log('@')
            this.opacity -= 0.01
            if(this.opacity <= 0) this.opacity = 1
        },16)
    },
    deactivated() {
        console.log('News组件失活了')
        clearInterval(this.timer)
    },
}
</script>
<style lang="">
    
</style>